<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul li {
				list-style: none;
				color: #ccc;
				width: 400px;
			}
		</style>
	</head>
	<body>
		<input type="text" id="txt"  />
		<input type="button" value="搜索" id="btn"  />
		<ul id="ul"></ul>
	</body>
	<script>
		var oTxt = document.getElementById("txt");
		var oul = document.getElementById("ul");
		oTxt.onkeyup = function(){
			var script = document.createElement("script");
			script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + oTxt.value + "^&sugmode=2^&json=1^&p=3^&sid=22832_22162_1446_21091_22918_22158^&req=2^&bs=aaa^&pbs=aaa^&csor=3^&cb=fn";
			document.getElementsByTagName("head")[0].appendChild(script);
		}
		function fn(str){
				//console.log(str.s)	
				for(var i = 0; i < str.s.length; i ++){
					str.s[i].index = i;//记录当前下标
					var li = document.createElement("li");//创建li以存储获取的数据
					li.innerHTML = str.s[i];//存储
					oul.appendChild(li);//将li添加至ul中
					
					//为每个新增li添加事件
					li.onmouseover = function(){
						this.style.color = "#333";
						this.style.background = "#e8dfc4";
					};
					li.onmouseout = function(){
						this.style.color = "#ccc";
						this.style.background = "";
					};
				}
			}
	</script>
</html>
